<script setup lang="ts"></script>

<template>
  <div class="color-text">
    <slot>这里是彩色文字</slot>
  </div>
</template>

<style lang="scss" scoped>
.color-text {
  text-align: center;
  font-size: 40px;
  /* 设置背景透明色 */
  background-image: -webkit-linear-gradient(
    left,
    blue,
    #66ffff 10%,
    #cc00ff 20%,
    #cc00cc 30%,
    #ccccff 40%,
    #00ffff 50%,
    #ccccff 60%,
    #cc00cc 70%,
    #cc00ff 80%,
    #66ffff 90%,
    blue 100%
  );
  /* 背景被裁剪成文字的前景色 */
  -webkit-background-clip: text;
  /* 将字体设置成透明色 */
  -webkit-text-fill-color: transparent;
  /* 启用动画 */
  animation: masked-animation 4s linear infinite;
}

@keyframes masked-animation {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 500px 0;
  }
}
</style>
